<template>
  <div class="main">
    <div class="main-desc">
      <h3 class="font-24">红人管理</h3>
      <p class="font-14">集中统筹红人信息，内部信息一键共享，完善营销监督机制提高团队协作效能</p>
    </div>
    <div class="main-content">
      <div class="tabs flex">
        <p v-for="(item, index) in tabs" :key="index" class="font-14 pointer" :class="{ active: item === form.tab }"
          @click="tabChange(item)">
          {{ item }}
        </p>
      </div>

      <div class="operate-top flex-between flex-align-items-center">
        <div v-if="form.tab === '收藏夹'" class="color-list flex-center flex-align-items-center">
          <p v-for="(item, index) in colorList" :key="index" class="pointer flex-center flex-align-items-center"
            :style="{ background: item }" @click="colorChange(item)">
            <i v-if="item === form.color" class="iconfont icon-gou1"></i>
          </p>
        </div>
        <div v-if="form.tab === '推荐红人' || form.tab === '已隐藏红人'" class="platform-list flex-center flex-align-items-center">
          <div v-for="(item, index) in platformList" :key="index" class="flex flex-align-items-center pointer"
            :class="{ active: item.name === form.platform }" @click="platformChange(item.name)">
            <img :src="item.icon">
            <span class="font-12">{{ `${item.name}(${item.count})` }}</span>
          </div>
        </div>
        <el-date-picker v-if="form.tab === '自主导入红人'" v-model="form.timeRange" type="daterange" range-separator="~"
          start-placeholder="开始日期" end-placeholder="结束日期" />
        <div v-if="form.tab === '黑名单'"></div>
        <div class="operate-top-right flex flex-align-items-center">
          <el-select v-if="form.tab === '收藏夹'" v-model="form.account">
            <el-option v-for="item in accountList" :key="item.value" :label="item.name" :value="item.value"></el-option>
          </el-select>
          <el-dropdown v-if="form.tab === '收藏夹'" :hide-on-click="false" trigger="click">
            <p class="sort-btn flex-center flex-align-items-center pointer">
              <i class="iconfont icon-paixu"></i>
            </p>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(item, index) in sortList" :key="index">
                  <span>{{ item.name }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div class="search">
            <el-input v-model="form.keyword" type="text" placeholder="搜索" maxlength="20" />
            <p class="pointer flex-center flex-align-items-center">
              <i class="iconfont icon-sousuo"></i>
            </p>
          </div>
        </div>
      </div>

      <div v-if="form.tab === '推荐红人' || form.tab === '自主导入红人'" class="screen flex flex-wrap">
        <el-popover v-if="form.tab === '自主导入红人'" placement="bottom-start" :width="118" trigger="click" :show-arrow="false"
          @show="selectShowChange('platform', true)" @hide="selectShowChange('platform', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.platform > 0, active: selectShow.platformShow }">
              <span class="font-14">{{ form.platform > 0 ? data.platformList.find(item => item.value ===
                form.platform).name
                : '平台' }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <radio-popup :list="data.platformList" :checked="form.platform"
            @change="e => selectChange(e, 'platform')"></radio-popup>
        </el-popover>
        <el-popover v-if="form.tab === '推荐红人'" placement="bottom-start" :width="841" trigger="click" :show-arrow="false"
          @show="selectShowChange('catesShow', true)" @hide="selectShowChange('catesShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.cates.length > 0, active: selectShow.catesShow }">
              <span class="font-14">分类{{ form.cates.length > 0 ? `(${form.cates.length})` : '' }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <checkbox-popup :list="cateList" :checked="form.cates" @change="e => selectChange(e, 'cates')"></checkbox-popup>
        </el-popover>
        <el-popover placement="bottom-start" :width="841" trigger="click" :show-arrow="false"
          @show="selectShowChange('areasShow', true)" @hide="selectShowChange('areasShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.areas.length > 0, active: selectShow.areasShow }">
              <span class="font-14">国家{{ form.areas.length > 0 ? `(${form.areas.length})` : '' }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <checkbox-popup :list="countryList" :checked="form.areas"
            @change="e => selectChange(e, 'areas')"></checkbox-popup>
        </el-popover>
        <el-popover v-if="form.tab === '推荐红人'" placement="bottom-start" :width="162" trigger="click" :show-arrow="false"
          @show="selectShowChange('tags', true)" @hide="selectShowChange('tags', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.tags.length > 0, active: selectShow.tagsShow }">
              <span class="font-14">标签筛选{{ form.tags.length > 0 ? `(${form.tags.length})` : '' }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <checkbox-popup1 :list="tagsList" :checked="form.tags" @change="e => selectChange(e, 'tags')"></checkbox-popup1>
        </el-popover>
        <el-popover v-if="form.tab === '推荐红人'" placement="bottom" :width="194" trigger="click" :show-arrow="false"
          @show="selectShowChange('fansShow', true)" @hide="selectShowChange('fansShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.fans !== -1, active: form.fansShow }">
              <span class="font-14">{{ form.fans === -1 ? '粉丝量' : form.fans.toString().split('-').length > 1 ?
                form.fans : `${form.fans}以上` }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <radio-range-popup :list="data.fansList" :checked="form.fans" minPlaceholder="最小值" maxPlaceholder="最大值"
            @change="e => selectChange(e, 'fans')"></radio-range-popup>
        </el-popover>
        <el-popover v-if="form.tab === '推荐红人'" placement="bottom" :width="194" trigger="click" :show-arrow="false"
          @show="selectShowChange('averageViewsShow', true)" @hide="selectShowChange('averageViewsShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.averageViews !== -1, active: selectShow.averageViewsShow }">
              <span class="font-14">{{ form.averageViews === -1 ? '平均观看量' :
                form.averageViews.toString().split('-').length > 1 ?
                  form.averageViews : `${form.averageViews}以上` }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <radio-range-popup :list="data.averageViews" :checked="form.averageViews" minPlaceholder="最小值"
            maxPlaceholder="最大值" @change="e => selectChange(e, 'averageViews')"></radio-range-popup>
        </el-popover>
        <el-popover v-if="form.tab === '推荐红人'" placement="bottom" :width="194" trigger="click" :show-arrow="false"
          @show="selectShowChange('averageInteractionRateShow', true)"
          @hide="selectShowChange('averageInteractionRateShow', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.averageInteractionRate !== -1, active: selectShow.averageInteractionRateShow }">
              <span class="font-14">{{ form.averageInteractionRate === -1 ? '平均互动率' :
                form.averageInteractionRate.toString().split('-').length > 1 ?
                  `${form.averageInteractionRate.toString().split('-')[0]}%-${form.averageInteractionRate.toString().split('-')[1]}%`
                  : `${form.averageInteractionRate}%以上` }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <radio-range-popup :list="data.averageInteractionRate" :checked="form.averageInteractionRate"
            minPlaceholder="最小值 %" maxPlaceholder="最大值 %"
            @change="e => selectChange(e, 'averageInteractionRate')"></radio-range-popup>
        </el-popover>
        <el-popover v-if="form.tab === '推荐红人'" placement="bottom-start" :width="162" trigger="click" :show-arrow="false"
          @show="selectShowChange('followPerson', true)" @hide="selectShowChange('followPerson', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.followPerson.length > 0, active: selectShow.followPersonShow }">
              <span class="font-14">推荐人{{ form.followPerson.length > 0 ? `(${form.followPerson.length})` : '' }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <checkbox-popup1 :list="accountList" :checked="form.followPerson"
            @change="e => selectChange(e, 'followPerson')"></checkbox-popup1>
        </el-popover>
        <el-popover v-if="form.tab === '自主导入红人'" placement="bottom-start" :width="162" trigger="click" :show-arrow="false"
          @show="selectShowChange('followPerson', true)" @hide="selectShowChange('followPerson', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.followPerson.length > 0, active: selectShow.followPersonShow }">
              <span class="font-14">导入账号{{ form.followPerson.length > 0 ? `(${form.followPerson.length})` : '' }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <checkbox-popup1 :list="accountList" :checked="form.followPerson"
            @change="e => selectChange(e, 'followPerson')"></checkbox-popup1>
        </el-popover>
        <el-popover placement="bottom-start" :width="162" trigger="click" :show-arrow="false"
          @show="selectShowChange('contactStatus', true)" @hide="selectShowChange('contactStatus', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.contactStatus.length > 0, active: selectShow.contactStatusShow }">
              <span class="font-14">联系状态{{ form.contactStatus.length > 0 ? `(${form.contactStatus.length})` : '' }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <radio-popup :list="contactStatusList" :checked="form.contactStatus"
            @change="e => selectChange(e, 'contactStatus')"></radio-popup>
        </el-popover>
        <el-popover placement="bottom-start" :width="118" trigger="click" :show-arrow="false"
          @show="selectShowChange('email', true)" @hide="selectShowChange('email', false)">
          <template #reference>
            <div class="select-btn flex-between flex-align-items-center pointer"
              :class="{ selected: form.email > 0, active: selectShow.emailShow }">
              <span class="font-14">{{ form.email > 0 ? data.emailList.find(item => item.value === form.email).name
                : '是否有邮箱' }}</span>
              <i class="iconfont icon-xiajiantou"></i>
            </div>
          </template>
          <radio-popup :list="data.emailList" :checked="form.email" @change="e => selectChange(e, 'email')"></radio-popup>
        </el-popover>
        <div class="screen-btns flex">
          <p class="font-14 pointer" @click="clearScreen">清除</p>
          <p class="font-14 pointer">确定</p>
        </div>
      </div>

      <template v-if="form.tab === '收藏夹'">
        <div v-if="favoritesList.length > 0" class="favorites-list flex flex-wrap">
          <div v-for="item in  favoritesList " :key="item.id" class="item pointer" @click="toDetail(item)">
            <p class="item-time">
              <img :src="bgObj[item.color].img">
              <span class="font-12" :style="{ color: item.color }">{{ item.time }}</span>
            </p>
            <div class="item-content flex flex-column" :style="{ background: bgObj[item.color].color }">
              <p v-if="item.isOpen" title="私密文件夹" class="item-open flex-center flex-align-items-center"
                :style="{ background: item.color }">
                <i class="iconfont icon-hand-full"></i>
              </p>
              <el-popover placement="bottom" :width="180" trigger="hover">
                <template #reference>
                  <i class="operate-btn iconfont icon-junhengqi"></i>
                </template>
                <div class="operate-popup">
                  <p class="btn font-14 pointer" @click.stop="collectEddInfoShow(item)">编辑</p>
                  <p class="btn font-14 pointer" @click.stop="delItem(item)">删除</p>
                  <div class="color-list flex">
                    <p v-for="(color, colorIndex) in colorList" :key="colorIndex"
                      class="pointer flex-center flex-align-items-center" :style="{ background: color }">
                      <i v-if="color === item.color" class="iconfont icon-gou1"></i>
                    </p>
                  </div>
                </div>
              </el-popover>
              <p class="item-count font-12"><span class="font-18-B" :style="{ color: item.color }">{{ item.count
              }}</span>/人
              </p>
              <p class="item-name font-14 ellipsis-1" :title="item.name">{{ item.name }}</p>
            </div>
          </div>
        </div>
        <no-data v-else style="padding: 100px 0;"></no-data>
        <p class="add flex-center flex-align-items-center pointer" @click="collectEddInfoShow(null)">
          <i class="iconfont icon-jiahao"></i>
        </p>
      </template>
      <template v-else>
        <el-table :data="tableData" height="420" style="width: 100%;" class="table"
          @selection-change="handleSelectionChange">
          <el-table-column v-if="form.tab !== '黑名单'" type="selection" width="50" fixed="left" />
          <el-table-column :label="form.tab !== '黑名单' ? '全选' : ''" width="180" fixed="left">
            <template #default="scope">
              <div class="row-name flex flex-align-items-center">
                <img :src="scope.row.avatar">
                <p class="font-16-B ellipsis-1">{{ scope.row.name }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="form.tab === '推荐红人'" prop="averageInteractionRate" label="推荐日期" width="140" />
          <el-table-column v-if="form.tab === '推荐红人'" prop="averageInteractionRate" label="推荐账号" width="160" />
          <el-table-column v-if="form.tab === '自主导入添加'" prop="averageInteractionRate" label="导入日期" width="180" />
          <el-table-column v-if="form.tab === '已隐藏红人'" prop="averageInteractionRate" label="隐藏日期" width="160" />
          <el-table-column label="所属平台" width="100">
            <template #default="scope">
              <img :src="platformImg[scope.row.platform]" class="row-img">
            </template>
          </el-table-column>
          <el-table-column prop="location" label="国家" width="100" />
          <el-table-column label="平台标签" width="220">
            <template #default="scope">
              <div v-if="scope.row.tags" class="row-tags flex">
                <p v-for="(item, index) in scope.row.tags.slice(0, 2)" :key="index" class="row-tag font-12">{{ item }}
                </p>
                <el-popover v-if="scope.row.tags.length > 2" width="320" placement="bottom" trigger="hover">
                  <template #reference>
                    <div class="row-tag flex-center flex-align-items-center">
                      <i class="iconfont icon-gengduo"></i>
                    </div>
                  </template>
                  <div class="item-all-tags flex flex-wrap">
                    <p v-for="(tag, tagIndex) in scope.row.tags.slice(0, 3)" :key="tagIndex" class="item-all-tag">{{ tag
                    }}
                    </p>
                  </div>
                </el-popover>
              </div>
              <p v-else>-</p>
            </template>
          </el-table-column>
          <el-table-column label="自定义标签" width="220">
            <template #default="scope">
              <div v-if="scope.row.tags" class="row-tags flex">
                <p v-for="(item, index) in scope.row.tags.slice(0, 2)" :key="index" class="row-tag font-12">{{ item }}
                </p>
                <el-popover v-if="scope.row.tags.length > 2" width="320" placement="bottom" trigger="hover">
                  <template #reference>
                    <div class="row-tag flex-center flex-align-items-center">
                      <i class="iconfont icon-gengduo"></i>
                    </div>
                  </template>
                  <div class="item-all-tags flex flex-wrap">
                    <p v-for="(tag, tagIndex) in scope.row.tags.slice(0, 3)" :key="tagIndex" class="item-all-tag">{{ tag
                    }}
                    </p>
                  </div>
                </el-popover>
              </div>
              <p v-else>-</p>
            </template>
          </el-table-column>
          <el-table-column v-if="form.tab === '推荐红人' || form.tab === '推广计划添加'" prop="averageInteractionRate" label="凡兔评分"
            width="100" />
          <el-table-column prop="fans" label="粉丝量" width="100">
            <template #default="scope">
              <p class="font-14">{{ numConvert(scope.row.fans, 2) }}</p>
            </template>
          </el-table-column>
          <el-table-column v-if="form.tab !== '黑名单'" prop="averageInteractionRate" label="平均观看量" width="140">
            <template #default="scope">
              <p class="font-14">{{ numConvert(scope.row.averageViews, 2) }}</p>
            </template>
          </el-table-column>
          <el-table-column v-if="form.tab !== '黑名单'" prop="averageInteractionRate" label="平均互动率" width="140" />
          <el-table-column v-if="form.tab === '黑名单'" prop="averageInteractionRate" label="操作账号" width="140" />
          <el-table-column v-if="form.tab === '黑名单'" prop="averageInteractionRate" label="拉黑时间" width="160" />
          <el-table-column v-if="form.tab === '黑名单'" prop="averageInteractionRate" label="拉黑理由" width="140" />
          <el-table-column v-if="form.tab === '自主导入添加'" prop="averageInteractionRate" label="本账号联系状态" width="150" />
          <el-table-column v-if="form.tab === '自主导入添加'" prop="averageInteractionRate" label="所有账号联系状态" width="150" />
          <el-table-column v-if="form.tab === '自主导入红人'" prop="averageInteractionRate" label="导入账号" width="150" />
          <el-table-column v-if="form.tab === '已隐藏红人' || form.tab === '黑名单'" label="操作" width="150">
            <template #default="scope">
              <p v-if="form.tab === '已隐藏红人'" class="row-btn font-14 pointer">取消隐藏</p>
              <p v-else class="row-btn font-14 pointer">取消黑名单</p>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination flex">
          <el-pagination layout="prev, pager, next, total" :total="form.total" />
        </div>
      </template>
    </div>
  </div>

  <collect-edit v-if="collectEddInfo.show" :info="collectEddInfo" @close="collectEddInfo.show = false"></collect-edit>
</template>

<script setup>
import CheckboxPopup from '@/views/home/components/checkboxPopup.vue';
import RadioRangePopup from '@/views/home/components/radioRangePopup.vue';
import RadioPopup from '../../components/radioPopup.vue';
import CheckboxPopup1 from '../../components/checkboxPopup.vue';
import NoData from '@/components/noData.vue';
import CollectEdit from './components/collectEdit.vue';
import { ref, onMounted } from 'vue';
import api from '@/api/index.js';
import data from '@/js/data.js';
import { ElMessageBox } from 'element-plus';
import numConvert from '@/js/numConvert';
import { useRouter } from 'vue-router';

const router = useRouter();

const tabs = ["收藏夹", "推荐红人", "自主导入红人", "已隐藏红人", "黑名单"];
const sortList = [
  {
    name: '创建时间',
    value: 1
  },
  {
    name: '红人数量',
    value: 2
  },
  {
    name: '收藏夹名称',
    value: 3
  }
];
const platformList = [
  {
    name: "YouTube",
    icon: require('../../../../assets/icon-1.png'),
    count: 0
  },
  {
    name: "TikTok",
    icon: require('../../../../assets/icon-2.png'),
    count: 0
  },
  {
    name: "Instagram",
    icon: require('../../../../assets/icon-3.png'),
    count: 0
  }
];
const platformImg = {
  1: require('../../../../assets/icon-1.png'),
  2: require('../../../../assets/icon-2.png'),
  3: require('../../../../assets/icon-3.png')
};
const colorList = ['#ff5277', '#555cfd', '#73deb3', '#ffe700', '#f47827'];
const bgObj = {
  '#ff5277': {
    color: 'linear-gradient(160deg,#fff,#fff4f7)',
    img: require('../../../../assets/file1.png')
  },
  '#555cfd': {
    color: 'linear-gradient(173deg,#fcfcff,#f9f9ff)',
    img: require('../../../../assets/file2.png')
  },
  '#73deb3': {
    color: 'linear-gradient(170deg,#fcfffe,#f9fffc)',
    img: require('../../../../assets/file3.png')
  },
  '#ffe700': {
    color: 'linear-gradient(166deg,#fffffc,#fffcf3)',
    img: require('../../../../assets/file4.png')
  },
  '#f47827': {
    color: 'linear-gradient(168deg,#fffdfc,#fffbf9)',
    img: require('../../../../assets/file5.png')
  }
};
const contactStatusList = [
  {
    name: '本账号未联系',
    value: 1
  },
  {
    name: '本账号已联系',
    value: 2
  },
  {
    name: '所有账号未联系',
    value: 3
  },
  {
    name: '所有账号已联系',
    value: 4
  }
];

const form = ref({
  tab: '收藏夹',
  platform: 'YouTube',
  color: null,
  account: 1,
  sort: null,
  timeRange: [],
  cates: [],
  areas: [],
  fans: -1,
  averageViews: -1,
  averageInteractionRate: -1,
  contactStatus: [],
  followPerson: [],
  email: -1,
  tags: [],
  total: 100
});
const collectEddInfo = ref({
  show: false
});
const accountList = ref([
  {
    name: '谢谢',
    value: 1
  },
  {
    name: '谢谢1',
    value: 2
  }
]);
const selectShow = ref({});
const tagsList = ref([
  {
    name: '游戏',
    value: 1
  },
  {
    name: '宠物',
    value: 2
  },
  {
    name: '美食',
    value: 3
  },
  {
    name: '美容',
    value: 4
  }
]);
const favoritesList = ref([
  {
    id: 1,
    time: '2023-12-28',
    name: 'xxxx',
    color: '#ff5277',
    isOpen: true,
    count: 1
  },
  {
    id: 2,
    time: '2023-12-28',
    name: 'xxxx',
    color: '#555cfd',
    isOpen: false,
    count: 1
  }
]);
const tableData = ref([]);
const cateList = ref([]);
const countryList = ref([]);

const collectEddInfoShow = e => {
  if (e) {
    collectEddInfo.value = {
      show: true,
      ...e
    }
  } else {
    collectEddInfo.value = {
      show: true
    }
  }
}
const tabChange = e => {
  if (form.value.tab !== e) {
    form.value.tab = e;
  }
}
const colorChange = e => {
  form.value.color = form.value.color === e ? null : e;
}
const platformChange = e => {
  if (form.value.platform !== e) {
    form.value.platform = e;
  }
}
const selectChange = (e, field) => {
  form.value[field] = e;
}
const selectShowChange = (field, value) => {
  selectShow.value[field] = value;
}
// 清除筛选条件
const clearScreen = () => {
  const newValue = {
    platform: -1,
    cates: [],
    areas: [],
    fans: -1,
    averageViews: -1,
    averageInteractionRate: -1,
    contactStatus: [],
    cooperationStage: [],
    followPerson: [],
    email: -1
  };
  form.value = {
    ...form.value,
    ...newValue
  }
}
const delItem = e => {
  ElMessageBox.confirm(
    `确定要删除收藏夹[${e.name}]吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
    })
    .catch(() => {
    })
}
const toDetail = e => {
  router.push(`/favoritesDetail?id=${e.id}`);
}
// 获取红人分类
const queryCateList = () => {
  api.sensation.queryCateList().then(res => {
    cateList.value = res.map(item => {
      item.children = item.categories;
      return item;
    });
  });
}
// 获取国家列表
const queryCountryList = () => {
  api.sensation.queryCountryList().then(res => {
    countryList.value = res.filter(item => item.countries.length).map(item => {
      item.children = item.countries;
      return item;
    });
  });
}

onMounted(() => {
  queryCateList();
  queryCountryList();
});
</script>

<style lang="less" scoped>
.main-desc {
  height: 100px;
  padding-left: 40px;

  h3 {
    color: #12172c;
    line-height: 32px;
    letter-spacing: 1px;
    padding-top: 20px;
    padding-bottom: 10px;
  }

  p {
    color: #333;
    letter-spacing: 1px;
  }
}

.main-content {
  height: calc(100vh - 164px);
  background: #fff;
  padding: 24px 32px 50px;
  overflow-y: auto;
}

.tabs {
  margin-bottom: 24px;

  p {
    color: #666;
    padding-bottom: 5px;
    margin-right: 40px;

    &.active {
      color: #333;
      border-bottom: 4px solid @main-color;
    }
  }
}

.operate-top {
  margin-bottom: 8px;

  .color-list {
    width: 186px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #f2f2f2;

    p {
      margin-right: 10px;
      width: 24px;
      height: 24px;
      border-radius: 6px;

      &:last-child {
        margin-right: 0;
      }

      i {
        color: #fff;
      }
    }
  }

  .platform-list {
    border: 1px solid #f2f2f2;
    border-radius: 10px;
    padding: 0 8px;
    height: 44px;

    div {
      border: 1px solid transparent;
      padding: 0 16px;
      border-radius: 8px;
      height: 32px;

      &.active {
        border: 1px solid rgba(255, 82, 119, .5);
        background: #ffedf1;

        span {
          color: @main-color;
        }
      }

      img {
        width: 17px;
        height: 17px;
        margin-right: 6px;
      }

      span {
        color: #666;
      }
    }
  }

  &::v-deep {
    .el-date-editor {
      flex-grow: 0;
      width: 300px;
      height: 44px;
    }

    .el-select {
      width: 200px;
      height: 44px;
      margin-right: 20px;

      .el-input {
        height: 44px;
      }
    }
  }

  .sort-btn {
    width: 48px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #f2f2f2;
    margin-right: 20px;

    i {
      font-size: 20px;
    }
  }

  .search {
    position: relative;

    &::v-deep .el-input {
      width: 250px;
      height: 44px;
    }

    p {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
      width: 44px;
      height: 100%;

      i {
        color: @main-color;
      }
    }
  }
}

.screen {
  padding-bottom: 16px;

  .select-btn {
    min-width: 118px;
    height: 32px;
    border-radius: 6px;
    background: #fff;
    padding-left: 12px;
    padding-right: 8px;
    margin-right: 8px;
    border: 1px solid #f2f2f2;
    margin-bottom: 16px;

    &.selected {
      background: #ffedf1;

      span,
      i {
        color: @main-color;
      }
    }

    &.active {
      background: #ffedf1;
      border: 1px solid @main-color;

      span,
      i {
        color: @main-color;
      }
    }

    span {
      color: #333;
    }

    i {
      color: #999;
      font-size: 12px;
    }
  }

  .screen-btns {
    margin-bottom: 16px;

    p {
      width: 64px;
      height: 32px;
      border-radius: 6px;
      text-align: center;
      line-height: 32px;

      &:first-child {
        color: #666;
        background: #f8f8f8;
      }

      &:last-child {
        margin-left: 8px;
        color: #fff;
        background: @main-color;
      }
    }
  }
}

.favorites-list {
  .item {
    width: 190px;
    margin-top: 30px;
    margin-right: 40px;

    .item-time {
      margin-left: 2px;
      width: 186px;
      height: 30px;
      padding-left: 10px;
      position: relative;

      img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }

      span {
        position: relative;
        z-index: 10;
        line-height: 30px;
      }
    }

    .item-content {
      margin-top: -3px;
      width: 190px;
      height: 119px;
      box-shadow: 0 -2px 4px 0 rgba(219, 160, 172, .3);
      border-radius: 10px;
      position: relative;
      justify-content: end;
      padding: 12px 10px;

      .item-open {
        width: 22px;
        height: 22px;
        border-radius: 5px;
        position: absolute;
        left: 16px;
        top: 14px;

        i {
          color: #fff;
        }
      }

      .operate-btn {
        position: absolute;
        right: 16px;
        top: 12px;
        color: #dadada;
        font-size: 20px;
      }

      .item-count {
        color: #999;
        margin-bottom: 5px;
      }

      .item-name {
        color: #666;
      }
    }
  }
}

.table {
  .row-name {
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 16px;
    }
  }

  .row-img {
    width: 20px;
    height: 20px;
  }

  .row-tags {
    .row-tag {
      height: 24px;
      padding: 0 8px;
      background: hsla(0, 0%, 93%, .4);
      border-radius: 12px;
      border: 1px solid #dcdee0;
      color: #666;
      line-height: 24px;
      margin-right: 8px;
    }
  }

  .row-btn {
    color: @main-color;
  }
}

.pagination {
  justify-content: end;
  position: fixed;
  left: 224px;
  bottom: 0;
  z-index: 80;
  width: calc(100vw - 224px);
  padding: 16px;
  background: #fff;
}

.add {
  position: fixed;
  width: 70px;
  height: 70px;
  bottom: 20px;
  right: 30px;
  z-index: 100;
  border-radius: 50%;
  background: linear-gradient(140deg, #a775ff, #ff5277);
  transition: transform .3s ease-in-out;

  i {
    font-size: 35px;
    color: #fff;
  }
}

.operate-popup {
  padding: 12px 8px;

  .btn {
    padding-left: 8px;
    height: 36px;
    line-height: 36px;
    color: #333;

    &:hover {
      background: #f9f9f9;
    }
  }

  .color-list {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #e5e6eb;

    p {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      margin-right: 10px;

      &:last-child {
        margin-right: 10px;
      }

      i {
        color: #fff;
      }
    }
  }
}

.item-all-tags {
  width: auto;
  padding: 10px;

  .item-all-tag {
    margin: 0 8px 10px 0;
    line-height: 24px;
    background: hsla(0, 0%, 93%, .4);
    border-radius: 12px;
    border: 1px solid #dcdee0;
    font-size: 12px;
    padding: 0 8px;
    color: #606266;
    white-space: nowrap;
  }
}
</style>
